<template>
  <div class="container">
      <a-page-header
       class="header"
        title="ids监控日志管理"
        sub-title="ids监控日志信息"
    />
    <a-divider></a-divider>
    <!-- 主机ip -->
    <div style="dispaly:block;height:20px;width:100%"></div>
     <a-table :data-source="data" :columns="columns">
    <div
      slot="filterDropdown"
      slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      style="padding: 8px"
    >
      <a-input
        v-ant-ref="c => (searchInput = c)"
        :placeholder="`Search ${column.dataIndex}`"
        :value="selectedKeys[0]"
        style="width: 188px; margin-bottom: 8px; display: block;"
        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
      />
      <a-button
        type="primary"
        icon="search"
        size="small"
        style="width: 90px; margin-right: 8px"
        @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
      >
        Search
      </a-button>
      <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
        Reset
      </a-button>
    </div>
    <a-icon
      slot="filterIcon"
      slot-scope="filtered"
      type="search"
      :style="{ color: filtered ? '#108ee9' : undefined }"
    />
    <template slot="customRender" slot-scope="text, record, index, column">
      <span v-if="searchText && searchedColumn === column.dataIndex">
        <template
          v-for="(fragment, i) in text
            .toString()
            .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
        >
          <mark
            v-if="fragment.toLowerCase() === searchText.toLowerCase()"
            :key="i"
            class="highlight"
            >{{ fragment }}</mark
          >
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
      <template v-else>
        {{ text }}
      </template>
    </template>
    <span slot="customRenderTime" slot-scope="text"> {{formatDate(text)}} </span>
    <span slot="customRenderTag" slot-scope="text"> 
      <a-tag color="grey" v-if="text == 0">
        一般
      </a-tag>
      <a-tag color="orange" v-if="text == 1">
        警告
      </a-tag>
      <a-tag color="red" v-if="text == 2">
        危险
      </a-tag>
      <a-tag color="red" v-if="text == 3">
        非常危险
      </a-tag>
    </span>
     <template slot="operation" slot-scope="text, record">
        <a-popconfirm
          v-if="data.length"
          title="是否删除该条记录?"
          @confirm="() => onDelete(record.id)"
        >
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
  </a-table>
  </div>
</template>
<script >

// import {getCpuLoad, getDiskInfo, getIdsPoolStatus, getSystemInfo} from "@/api/system_info/system_info"
import {recordList, recordDelete} from "@/api/record/record"

export default {
  components:{
  },
  data() {
    return {
      data:[],
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      columns: [
        {
          title: '源IP',
          dataIndex: 'sourceIp',
          key: 'sourceIp',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.name
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },
        },
        {
          title: '源端口',
          dataIndex: 'sourcePort',
          key: 'sourcePort',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.age
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              });
            }
          },
        },
        {
          title: '目的IP',
          dataIndex: 'targetIp',
          key: 'targetIp',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.name
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },
        },
        {
          title: '目的端口',
          dataIndex: 'targetPort',
          key: 'targetPort',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.age
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              });
            }
          },
        },
        {
          title: '日志报警描述',
          dataIndex: 'description',
          key: 'description',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.address
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              });
            }
          },
        },
        {
          title: '日志生成时间',
          dataIndex: 'updatedTime',
          key: 'updatedTime',
          scopedSlots: {
            customRender: 'customRenderTime',
          },
        },
        {
          title: '危险级别',
          dataIndex: 'logLevel',
          key: 'logLevel',
          scopedSlots: {
            customRender: 'customRenderTag',
          },
        },
        {
          title: 'operation',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    };
  },
  methods: {
   handleSearch(selectedKeys, confirm, dataIndex) {
      confirm();
      this.searchText = selectedKeys[0];
      this.searchedColumn = dataIndex;
    },

    handleReset(clearFilters) {
      clearFilters();
      this.searchText = '';
    },
    updateRecordList(){
      var param = {}
      recordList(param)
      .then(data=>{
        console.log(data.data)
        this.data = data.data;
      })
      .catch(err=>{
        this.$message.error("获取监控记录信息出错")
      })
    },
    formatDate(date){
      return this.$moment(date).format('YYYY-MM-DD HH:mm:ss');
    },
    onDelete(id){
      var param = {'id':id}
      console.log(param)
      recordDelete(param)
      .then(data=>{
        console.log(data)
        this.$message.success("删除完成")
        this.updateRecordList()
      })
      .catch(err=>{
        this.$message.error("删除出错")
      })
    }
  },
  created(){
    this.updateRecordList();
  }
};
</script>

<style lang="less" scoped>

.highlight {
  background-color: rgb(255, 192, 105);
  padding: 0px;
}

.container{
  height: 100%;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  // background-color:grey;
}

.title-text{
  font-size: 18px;
  font-weight: bold;
}

.header{
  margin-left: -30px;
}

.detail-panel{
  background-color: antiquewhite;
  margin-bottom: 20px;
}

.grid-content{
  display: flex;
  justify-content: center;
}
</style>
